<template>
    <uxt-page :title="title">
        <uxt-bar-group title="设置">
            <uxt-single-selector-bar
                title="输入类型"
                desc="type"
                :options="types"
                v-model="type"
            ></uxt-single-selector-bar>
            <uxt-color-selector-bar
                title="文字颜色"
                desc="color=xx/颜色值"
                v-model="color"
                clearable
            ></uxt-color-selector-bar>
            <uxt-color-selector-bar
                title="背景色"
                desc="bg-color=xx/颜色值"
                v-model="bgColor"
                light
                gradual
                clearable
            ></uxt-color-selector-bar>
            <uxt-bar title="提示">
                <template slot="right">
                    <uxt-input
                        classes="solid radius margin-xs"
                        :styles="{ width: '200rpx' }"
                        v-model="placeholder"
                    ></uxt-input>
                </template>
            </uxt-bar>
            <uxt-color-selector-bar
                title="提示颜色"
                desc="placeholder-color=xx/颜色值"
                v-model="placeholderColor"
            ></uxt-color-selector-bar>
            <uxt-bar title="最大长度">
                <template slot="right">
                    <uxt-input
                        type="number"
                        classes="solid radius margin-xs"
                        :styles="{ width: '100rpx' }"
                        @blur="maxlength = parseInt($event.detail.value)"
                    ></uxt-input>
                </template>
            </uxt-bar>
            <uxt-single-selector-bar
                title="键盘右下角确认文字"
                desc="confirm-type"
                :options="confirmTypes"
                v-model="confirmType"
            ></uxt-single-selector-bar>
            <uxt-bar title="聚焦选中内容">
                <template slot="right">
                    起
                    <uxt-input
                        type="number"
                        classes="solid radius margin-xs"
                        :styles="{ width: '100rpx' }"
                        @input="selection[0] = parseInt($event)"
                    ></uxt-input>
                    止
                    <uxt-input
                        type="number"
                        classes="solid radius margin-xs"
                        :styles="{ width: '100rpx' }"
                        @input="selection[1] = parseInt($event)"
                    ></uxt-input>
                </template>
            </uxt-bar>
            <uxt-bar title="自动增高" desc="auto-height,textarea有效">
                <template slot="right">
                    <uxt-switch v-model="autoHeight" radius size="sm"></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-bar title="聚焦" desc="focus">
                <template slot="right">
                    <uxt-switch v-model="focus" radius size="sm"></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-bar title="清除" desc="clearable">
                <template slot="right">
                    <uxt-switch v-model="clearable" radius size="sm"></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-bar title="v-model绑定" desc="disabled">
                <template slot="right">
                    <uxt-switch v-model="vmodel" radius size="sm"></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-bar title="禁用" desc="disabled">
                <template slot="right">
                    <uxt-switch v-model="disabled" radius size="sm"></uxt-switch>
                </template>
            </uxt-bar>
        </uxt-bar-group>
        <uxt-bar-group title="事件">
            <template slot="right">
                <text @click="events = ''">清空</text>
            </template>
            <view
                class="padding bg-white"
                v-html="events"
                style="height: 200rpx; overflow-y: auto;"
            ></view>
        </uxt-bar-group>
        <uxt-bar-group title="展示">
            <view class="padding bg-white text-center">
                <uxt-input
                    classes="solid radius padding-xs width-p100"
                    :type="types[type]"
                    :color="color"
                    :bg-color="bgColor"
                    :placeholder="placeholder"
                    :placeholder-color="placeholderColor"
                    :maxlength="maxlength"
                    :comfirm-type="confirmTypes[confirmType]"
                    :selection="selection"
                    :focus="focus"
                    :disabled="disabled"
                    :clearable="clearable"
                    :auto-height="autoHeight"
                    v-model="text"
                    @input="handleEvent('input', $event)"
                    @focus="handleEvent('focus', $event)"
                    @blur="handleEvent('blur', $event)"
                    @confirm="handleEvent('confirm', $event)"
                    @clear="handleEvent('clear', $event)"
                ></uxt-input>
            </view>
            <view class="padding bg-white text-center" v-if="vmodel">{{ text }}</view>
        </uxt-bar-group>
        <uxt-bar-group title="输入栏">
            <uxt-bar title="标题宽度" desc="title-width">
                <template slot="right">
                    <uxt-input
                        classes="solid radius margin-xs"
                        :styles="{ width: '100rpx' }"
                        @blur="titleWidth = getSize2($event.detail.value)"
                    ></uxt-input>
                </template>
            </uxt-bar>
            <uxt-bar title="标题换行" desc="col">
                <template slot="right">
                    <uxt-switch v-model="col" radius size="sm"></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-bar title="盒模式" desc="box">
                <template slot="right">
                    <block v-if="box">
                        圆角：
                        <uxt-radio-group v-model="radius" size="sm" type="btn">
                            <uxt-radio label="无" value=""></uxt-radio>
                            <uxt-radio
                                classes="margin-lr-sm"
                                label="小圆角"
                                value="radius"
                            ></uxt-radio>
                            <uxt-radio
                                classes="margin-right-sm"
                                label="大圆角"
                                value="round"
                            ></uxt-radio>
                        </uxt-radio-group>
                    </block>
                    盒模式：
                    <uxt-switch v-model="box" round size="sm" @change="radius = ''"></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-input-bar
                title="标题"
                :type="types[type]"
                :color="color"
                :bg-color="bgColor"
                :placeholder="placeholder"
                :placeholder-color="placeholderColor"
                :maxlength="maxlength"
                :comfirm-type="confirmTypes[confirmType]"
                :selection="selection"
                :disabled="disabled"
                :clearable="clearable"
                :auto-height="autoHeight"
                :title-width="titleWidth"
                :col="col"
                :box="box"
                :round="radius === 'round'"
                :radius="radius === 'radius'"
                @input="handleEvent('input', $event)"
                @focus="handleEvent('focus', $event)"
                @blur="handleEvent('blur', $event)"
                @confirm="handleEvent('confirm', $event)"
                @clear="handleEvent('clear', $event)"
            ></uxt-input-bar>
        </uxt-bar-group>
    </uxt-page>
</template>

<script>
import uxtBarGroup from '@xtcoder/uxt/components/uxt-bar-group.vue'
import uxtBar from '@xtcoder/uxt/components/uxt-bar.vue'
import uxtRadio from '@xtcoder/uxt/components/uxt-radio.vue'
import uxtRadioGroup from '@xtcoder/uxt/components/uxt-radio-group.vue'
import uxtSwitch from '@xtcoder/uxt/components/uxt-switch.vue'
import uxtInput from '@xtcoder/uxt/components/uxt-input.vue'
import uxtInputBar from '@xtcoder/uxt/components/uxt-input-bar.vue'
import uxtCheckbox from '@xtcoder/uxt/components/uxt-checkbox.vue'
import uxtSingleSelectorBar from '@xtcoder/uxt/components/uxt-single-selector-bar.vue'
import uxtColorSelectorBar from '@xtcoder/uxt/components/uxt-color-selector-bar.vue'

export default {
    components: {
        uxtBarGroup,
        uxtBar,
        uxtRadio,
        uxtRadioGroup,
        uxtSwitch,
        uxtInput,
        uxtInputBar,
        uxtCheckbox,
        uxtSingleSelectorBar,
        uxtColorSelectorBar
    },
    data() {
        return {
            title: '输入框',
            types: ['text', 'password', 'number', 'idcard', 'digit', 'textarea'],
            type: 0,
            color: '',
            bgColor: 'white',
            placeholder: '请输入',
            placeholderColor: 'grey',
            maxlength: -1,
            confirmTypes: ['send', 'search', 'next', 'go', 'done'],
            confirmType: 4,
            selection: [-1, -1],
            focus: false,
            autoHeight: true,
            vmodel: false,
            text: '',
            disabled: false,
            clearable: false,
            titleWidth: '',
            col: false,
            box: false,
            radius: '',
            events: ''
        }
    },
    methods: {
        getSize2(size) {
            if (/^\d+$/g.test(size)) {
                return Number(size)
            } else {
                return size
            }
        },
        handleEvent(type, e) {
            this.events += `@${type}${e !== undefined ? `(${JSON.stringify(e)})` : ''}<br />`
        }
    }
}
</script>

<style lang="scss" scoped></style>
